<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tasks</title>
<link href="assets/css/bootstrap.css" rel="stylesheet" media="screen">
<style type="text/css">
tbody tr td:last-child {
	visibility: hidden;
}
tbody tr:hover {
	background: #fff;
}
tbody tr:hover td:last-child {
	visibility: visible;
}
</style>
</head>
<body>
	<div class="navbar navbar-static-top">
		<div class="navbar-inner">
			<div class="container">
				<a class="brand" href="#">Project name</a>
				<div class="nav-collapse">
					<ul class="nav">
						<li><a href="dashboard.html"><i class="icon-home icon-black"></i> Dashboard</a></li>
						<li><a href="history.html"><i class="icon-time icon-black"></i> History</a></li>
						<li class="active"><a href="tasks.html"><i class="icon-check icon-black"></i> Tasks</a></li>
					</ul>
					<div href="#" class="btn btn-success disabled" style="margin-left: 100px;">Balance: +354,33 &euro;</div>
					<div class="pull-right">
						<a href="#add" onclick="Reset()" role="button" class="btn btn-primary" data-toggle="modal">Add expense</a>
						<div class="btn-group">
							<a href="#" class="btn dropdown-toggle" data-toggle="dropdown">Niko <span class="caret"></span></a>
							<ul class="dropdown-menu">
								<li><a href="settings.html"><i class="icon-cog icon-black"></i> Settings</a></li>
								<li class="divider"></li>
								<li><a href="login.html"><i class="icon-off icon-black"></i> Logout</a></li>
							</ul>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

<div id="add" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="addLabel" aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h3 id="addLabel">Add expense</h3>
    </div>
    <div class="modal-body">
    	<div id="alertikus2"></div>
        <form class="form-horizontal">
            <div class="control-group">
                <label class="control-label" for="inputDate">Date</label>
                <div class="controls">
                    <input type="text" id="inputDate" placeholder="DD.MM.YYYY">
                </div>
            </div>
            <div class="control-group">
                <label class="control-label" for="inputDescription">Description</label>
                <div class="controls">
                    <input type="text" id="inputDescription" placeholder="Description">
                </div>
            </div>
            <div class="control-group">
                <label class="control-label" for="inputCategory">Category</label>
                <div class="controls ui-widget">
                    <select id="inputCategory" placeholder="Category">
                        <option value=""></option>
                        <option value="Clothes">Clothes</option>
                        <option value="Rent">Rent</option>
                        <option value="Household">Household</option>
                        <option value="Leisure">Leisure</option>
                        <option value="Cat">Cat</option>
                        <option value="Car">Car</option>
                        <option value="Doctor">Doctor</option>
                        <option value="Medicine">Medicine</option>
                        <option value="Office Material">Office Material</option>
                    </select>
                </div>
            </div>
            <div class="control-group">
                <label class="control-label" for="inputAmount">Amount</label>
                <div class="controls">
                    <div class="btn-group" data-toggle="buttons-radio">
                        <button type="button" class="btn"><i class="icon-minus icon-black"></i></button>
                        <button type="button" class="btn"><i class="icon-plus icon-black"></i></button>
                    </div>
                    <input type="text" id="inputAmount" placeholder="Amount">
                </div>
            </div>
            <div class="control-group">
                <label class="control-label" for="inputRepeat">Repeat</label>
                <div class="controls">
                    <select id="inputRepeat">
                        <option>daily</option>
                        <option>weekly</option>
                        <option>monthly</option>
                        <option>annually</option>
                    </select>
                </div>
            </div>
        </form>
    </div>
    <div class="modal-footer">
        <button class="btn" data-dismiss="modal" aria-hidden="true">Discard</button>
        <button id="saveandnew" class="btn btn-primary">Save changes and add new</button>
        <button id="saveonly" class="btn btn-primary" data-dismiss="modal">Save changes</button>
    </div>
</div>

<div id="edit" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="addLabel" aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h3 id="addLabel">Edit expense</h3>
    </div>
    <div class="modal-body">
    	<div id="alertikus2"></div>
        <form class="form-horizontal">
            <div class="control-group">
                <label class="control-label" for="inputDate">Date</label>
                <div class="controls">
                    <input type="text" id="inputDate" placeholder="DD.MM.YYYY">
                </div>
            </div>
            <div class="control-group">
                <label class="control-label" for="inputDescription">Description</label>
                <div class="controls">
                    <input type="text" id="inputDescription" placeholder="Description">
                </div>
            </div>
            <div class="control-group">
                <label class="control-label" for="inputCategory">Category</label>
                <div class="controls ui-widget">
                    <select id="inputCategory" placeholder="Category">
                        <option value=""></option>
                        <option value="Clothes">Clothes</option>
                        <option value="Rent">Rent</option>
                        <option value="Household">Household</option>
                        <option value="Leisure">Leisure</option>
                        <option value="Cat">Cat</option>
                        <option value="Car">Car</option>
                        <option value="Doctor">Doctor</option>
                        <option value="Medicine">Medicine</option>
                        <option value="Office Material">Office Material</option>
                    </select>
                </div>
            </div>
            <div class="control-group">
                <label class="control-label" for="inputAmount">Amount</label>
                <div class="controls">
                    <div class="btn-group" data-toggle="buttons-radio">
                        <button type="button" class="btn"><i class="icon-minus icon-black"></i></button>
                        <button type="button" class="btn"><i class="icon-plus icon-black"></i></button>
                    </div>
                    <input type="text" id="inputAmount" placeholder="Amount">
                </div>
            </div>
            <div class="control-group">
                <label class="control-label" for="inputRepeat">Repeat</label>
                <div class="controls">
                    <select id="inputRepeat">
                        <option>daily</option>
                        <option>weekly</option>
                        <option>monthly</option>
                        <option>annually</option>
                    </select>
                </div>
            </div>
        </form>
    </div>
    <div class="modal-footer">
        <button class="btn" data-dismiss="modal" aria-hidden="true">Discard</button>
        <button id="saveonly" class="btn btn-primary" data-dismiss="modal">Save changes</button>
    </div>
</div>

	<div class="container">
    <div id="alertikus1"></div>
		<h2>Tasks</h2>
		<div class="pull-right">
			<a class="btn btn-danger">Delete selected</a>
		</div>
		<div class="clearfix"></div>
		<form class="well">
			<table class="table">
				<thead>
					<tr>
						<th>Effective on</th>
						<th>Category</th>
						<th>Description</th>
						<th>Amount</th>
						<th>Repeating</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>02.10.2012</td>
						<td>Salary</td>
						<td>Second job</td>
						<td>1350 &euro;</td>
						<td>monthly</td>
					</tr>
					<tr>
						<td>03.10.2012</td>
						<td>Clothes</td>
						<td>Designer jeans subscription</td>
						<td>-450 &euro;</td>
						<td>monthly</td>
					</tr>
					<tr>
						<td>03.10.2012</td>
						<td>Rent city flat</td>
						<td>Rent</td>
						<td>-900 &euro;</td>
						<td>monthly</td>
					</tr>
					<tr>
						<td>03.10.2012</td>
						<td>Rent country house</td>
						<td>Rent</td>
						<td>-2000 &euro;</td>
						<td>monthly</td>
					</tr>
					<tr>
						<td>05.10.2012</td>
						<td>Salary</td>
						<td>Main job</td>
						<td>1900 &euro;</td>
						<td>monthly</td>
					</tr>
				</tbody>
			</table>
		</form>
	</div>
	<script src="assets/js/jquery.min.js"></script>
	<script src="assets/js/bootstrap.min.js"></script>
	<script src="assets/js/chosen.jquery.min.js"></script>
	<script type="text/javascript">
    $(function() {
        $('#inputCategory').chosen();
    });
	</script>
	<script type="text/javascript">
	$('table thead tr').prepend($('<td/>').html($('<input/>').attr('type', 'checkbox').change(function() {
		var new_status = $(this).is(':checked');
		$(this).parents('table').find('tbody tr').each(function(index) {
			$(this).find(':first-child input:checkbox').attr('checked', new_status);
		});
	})));
	$('table tbody tr').prepend($('<td/>').html($('<input/>').attr('type', 'checkbox').change(function() {
		$('table thead tr input:checkbox').attr('checked', $('table tbody tr input:checkbox').size() == $('table tbody tr input:checked').size());
	})));
	$('table tbody tr').append($('<td/>').html($('<a/>').attr('href', '#edit').attr('data-toggle', 'modal').html($('<i/>').addClass('icon-edit'))));
	</script>
	<script type="text/javascript">
	$('#add button').each(function(index) {
		$(this).click(function() {
			$('#add form')[0].reset();
		});
	});
	</script>
	<script type="text/javascript">
	$('#saveonly').click(function() {
		if (Math.random() > 0.5) {
			$('#alertikus1').html('<div class="alert alert-error"><button type="button" class="close" data-dismiss="alert">&times;</button><strong>Error!</strong> Unable to add expense. Please try again.</div>');
		} else {
			$('#alertikus1').html('<div class="alert alert-success"><button type="button" class="close" data-dismiss="alert">&times;</button><strong>Success!</strong> Expense saved.</div>');
		}
	});
	$('#saveandnew').click(function() {
		if (Math.random() > 0.5) {
			$('#alertikus2').html('<div class="alert alert-error"><button type="button" class="close" data-dismiss="alert">&times;</button><strong>Error!</strong> Unable to add expense. Please try again.</div>');
		} else {
			$('#alertikus2').html('<div class="alert alert-success"><button type="button" class="close" data-dismiss="alert">&times;</button><strong>Success!</strong> Expense saved.</div>');
		}
	});
	$('a[href="#add"]').click(function() {
		$('#alertikus1').html('');
		$('#alertikus2').html('');
	});
	</script>
</body>
</html>